<template>
	<div id="goodslist">
		<a href="javascript:void(0);" v-for="(item,index) in List" :key="index" @click="godetail(item.id)" >
			<img :src=item.pic alt="" >
			<div class="goodslist">
				<span>{{item.name}}</span><br>
				<span>{{item.price}}</span>
			</div>
		</a>
	</div>
</template>

<script>
	export default {
	  data () {
		  return {
			  //courselist:[1,2,3,4,5,6],
			  //goodslistimgs:['https://img10.360buyimg.com/seckillcms/s250x250_jfs/t1/146700/34/9672/78287/5f72d06eEa27dfa72/655520913c365e12.jpg','https://img10.360buyimg.com/seckillcms/s250x250_jfs/t1/146700/34/9672/78287/5f72d06eEa27dfa72/655520913c365e12.jpg']
		  }
	  },
	  methods: {
		  godetail(gid) {
		  	  this.$router.push({
		    path: '/detail',
		    query: {
		      gid: gid
		    }
		  })
		  }
	  },
	  mounted() {
	  },
	  props:[
		  'List'
	  ]
	}
</script>

<style>
	#goodslist {
		margin-top: 30px;
		width: 80%;
		margin-left: 10%;
		display: flex;
		flex-wrap: wrap;
	}
	#goodslist a {
		text-decoration: none;
		margin: 10px;
		padding: 10px;
		border: #909399 solid 1px;
	}
	#goodslist img {
		width: 300px;
		height: 340px;
	}
	.goodslist {
		max-width: 300px;
		margin-top: 20px;
		margin-bottom: 40px;
	}
	.goodslist span {
		color: #303133;
	}
	.goodslist span:hover {
		color: #303133;
	}
</style>
